<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首媒登陆</title>
<meta name="keywords" content="首媒后台主题,响应式后台">
<meta name="description" content="首媒是Bootstrap3，使用了Html5+CSS3等现代技术">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="Wed, 26 Feb 209908:21:57 GMT"> 
<link rel="shortcut icon" href="favicon.ico">     
<link href="${ctx}/static/css/bootstrap.min.css?v=" rel="stylesheet">
<link href="${ctx}/static/css/font-awesome.min.css?v=" rel="stylesheet">
<link href="${ctx}/static/css/animate.min.css?v=" rel="stylesheet">
<link href="${ctx}/static/css/style.min.css?v=" rel="stylesheet">
<link href="${ctx}/static/css/login.min.css" rel="stylesheet">
<link href="${ctx}/static/css/common.css" rel="stylesheet" />
<link href="${ctx}/static/css/swiper.min.css" rel="stylesheet" />

<script src="${ctx}/static/js/jquery.min.js?v="></script> 
<script src="${ctx}/static/js/swiper.min.js?v="></script>   
<script>if(window.top !== window.self){ window.top.location = window.location;}</script>
<style type="text/css">
body.signin{ height:100%; width: 100%; background: url(${ctx}/static/img/bg000001.png) no-repeat center 50%/cover;}
.swiper-slide{text-align: center;font-size: 18px;background: none;/* Center slide text vertically*/display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
.swiper-pagination-bullet{width:30px; height: 4px; border-radius: 4px; background: #999}
.swiper-pagination-bullet-active{ background: #f63}
.signinpanel form{ background: url(${ctx}/static/img/login-formbg.png) no-repeat center center/130% auto; padding: 30px 30px 60px;}
.signinpanel .btn{margin-top:35px;}
.tab_select {margin-bottom:30px;}
.user-mobile-code{ position:relative;}
.user-mobile-code #code_label{ position: absolute; right: 0; text-align: center;top: 0px; background: #ff6633; height: 34px; color: #fff; width: 80px; border:none}
	.active-send{ background:#fd855d}
	.step01-code{padding: 10px; background: #f7f7f7; margin-top: 10px; text-align: center}
	.step01-code span{ font-size:14px; color:#999; padding-right: 10px;}
	.step01-code i{padding-right:5px;}
	.step01-code span.active{ color:#ff6633;}
</style>
</head>

<body class="fixed-sidebar full-height-layoutg fixed-nav boxed-layout signin">

  <!--顶部导航开始-->
        <div class="row border-bottom topmenu">
                <nav class="navbar navbar-fixed-top" role="navigation" style="margin-bottom: 0; border-bottom:1px solid #e7e7e7;">
                    <div class="navbar-header">
                        <form role="search"  class="navbar-form-custom" method="post" action="">
                            <div class="form-group">
                              <a href="#" style="padding-left:50px; display:block"><img src="${ctx}/static/img/logo.png" style="height:37px; margin-top:10px;" /></a>
                            </div>
                        </form>
                    </div>
                    <ul class="nav navbar-top-links navbar-right">
                        
                        <li class="hidden-xs">
                            <a href="index_v1.html" class="J_menuItem" data-index="0"><i class="fa fa-question-circle"></i>帮助中心</a>
                        </li>
                         <li class="dropdown hidden-xs">
                            <a class="right-sidebar-toggle" aria-expanded="false">
                               <i class="fa fa-book" aria-hidden="true"></i>使用手册
                            </a>
                        </li>
                      
                    </ul>
                </nav>
            </div>
        <!--顶部导航结束end-->


    <div class="signinpanel">
        <div class="row">
            <div class="col-sm-7">
                <div class="signin-info">
                
                 <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">

            <div class="swiper-slide"><img src="${ctx}/static/img/banner1.png" /></div>
            <div class="swiper-slide"><img src="${ctx}/static/img/banner2.png" /></div>
            <div class="swiper-slide"><img src="${ctx}/static/img/banner3.png" /></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
                
<!--                    <h4><img src="${ctx}/static/img/loginpic.png" /></h4>-->
                </div>
            </div>
            <div class="col-sm-5">
                <!--找回密码信息-->
               
						<form id="shopregister-form" class="login-form-sm animated fadeInDown"
							novalidate="true">
							<h4 class="no-margins text-center">找回密码</h4>
							<div id="step1" class="auto">
								<div class="step01-code"><span class="step-01-text active"><i class="iconfont">01</i>验证手机</span>
								                	<span class="step-01-text"><i class="iconfont">02</i>设置密码</span>
							</div>
							 <input id="c_mob" type="text" name="c_mob" placeholder="输入手机号" required="" class="form-control mobile01" />
                    <div class="user-mobile-code"><input  id="code" name="code" type="text" placeholder="输入验证码" required="" class="form-control pword m-b" />
               <input value="获取验证码" type="button" id="code_label" onclick="get_code()">
                   </div>
   
                    <input type="button" onclick="next1()" class="btn btn-primary btn-block" value="下一步">

							</div>


							<div id="step2" style="display: none;">
							<div class="step01-code">
								               <span class="step-01-text"><i class="iconfont">01</i>验证手机</span>
								               <span class="step-01-text active"><i class="iconfont">02</i>设置密码</span>
								 </div>
								<input name="newpwd" type="password" datatype="*" nullmsg="请输入密码" id="onePwd" placeholder="请输入密码" value='' class="form-control pword m-b">
								
								<input type="password" datatype="*" nullmsg="请填写" name="renewpwd" id="twoPwd" placeholder="请再次输入密码" value='' class="form-control pword m-b">
								
								<input type="button" onclick="next2()"  class="btn btn-primary btn-block" value="提交">
								    
							</div>
							 <p class="text-muted text-center" style="margin-top: 10px;"><a href="${ctx}/login"><small>重新登录？</small></a></p>   
						</form>
			<div id="errormsg" style="display: none;">申请成功，等待后台审核</div>
		
                <!--找回密码信息end-->
                
                <div class="error_info">${error_info}</div>
            </div>
        </div>
        <div class="signup-footer">
            <div class="pull-left">
                &copy; Smedia 2016-2017 All Rights Reserved. 
            </div>
        </div>
    </div>
<script type="text/javascript">
  $(function(){
	 $('.tab_select li.tab_select_li2').click(function(){
		$(this).parent().addClass('media_bg');
		$(this).addClass('current').siblings().removeClass('current');
	 });
	  $('.tab_select li.tab_select_li1').click(function(){
		$(this).parent().removeClass('media_bg');
		$(this).addClass('current').siblings().removeClass('current');
	 });
  })
</script>


<script>
var swiper = new Swiper('.swiper-container', {
	pagination: '.swiper-pagination',
	paginationClickable: true,
	   autoplay : 4000,
	   loop : true,
//	effect : 'cube',
//		cube: {
//		  slideShadows: false,
//		  shadow: false,
//		  shadowOffset: 100,
//		  shadowScale: 0.6
//		}
});
</script>
<script src="${ctx}/static/js/plugins/layer/layer.js?v=${static_version}"></script>
<script type="text/javascript">

		var code; //存放发的验证码
		
		//手机验证码
		function get_code() {
			var phone = $("#c_mob").val();
			if(phone==""){
				layer.msg("手机号不能为空");
				return;
			}
			$.ajax({
				type : "post",
				url : "${ctx}/forget",
				data : "cMob=" + phone,
				success : function(msg) {
					var info = eval('(' + msg + ')');
					if(info.code=="0000"){//成功
						code = info.information;
						$("#code_label").val("验证码已发送");
						$("#code_label").addClass("active-send").val('已发送')
					}else{ //失败
						layer.msg(info.information, {
							icon : 2
						});
					}
				}
			})
		}
		// 发送验证码结束
		
		function next1(){
			var newcode = $("#code").val();
			var c_mob = $("#c_mob").val();
			if(c_mob==""||newcode==""){
				alert("手机号和验证码不能为空");
				return false;
			}

    		if (!$("#c_mob").val().match(/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/)) {
    		alert("手机号码格式不正确！");
    		//$("#moileMsg").html("<font color='red'>手机号码格式不正确！请重新输入！</font>");
    		$("#c_mob").focus();
    		return false;
    		}

			$.ajax({
				type:"post",
				async:false,
				url:"${ctx}/getCodeBymobile",
				data : "mob="+c_mob,
				success : function(msg) {
					var info = eval('(' + msg + ')');
					if (newcode==info) {
						$("#step1").hide();
						$("#step2").show();
						$("li[name='stepli2']").addClass("active");					
					} else {
						layer.msg("验证码错误", {
							icon : 2
						});
					}
				}
			})
			 
			
		}
		
		function next2(){
			var cPass = $("#onePwd").val();
			var rPass = $("#twoPwd").val();
			if(cPass==""||rPass==""){
				alert("密码不能为空");
				return;
			}
			if(cPass!=rPass){
				alert("密码不一次");
				return;
			}
			$.ajax({
				type:"post",
				url:"${ctx}/user_forgetpwd_reset",
				data : $("#shopregister-form").serialize(),
				error : function() {
					layer.msg('操作失败', {icon:5,time:1000});
				},
				success : function(msg) {
						layer.msg("密码修改成功，请登录", {
							icon : 1,
							time: 3000
						}, function(){
							window.location.href="${ctx}/login";
						});						
					
			
				
				}
			})
		}
	
	</script>
</body>
</html>